<template>
	<view class="xiangqing">
		<!-- 通告 -->
		<view class="tonggao">
			<view>
				<text>点此发布机械出租、求租、转让、求购信息</text>
				<text class="fabu">一键发布</text>
			</view>
			<view style="margin-top: 20rpx;">
				<text>置顶发布消息，提升曝光率，让别人主动联系你</text>
				<text class="zhiding">去置顶</text>
			</view>
		</view>
		<!-- 发布信息 -->
		<view class="xinxi">
			<view class="chuzu">
				<view class="title">出租龙工 其他 装载机</view>
				<view class="dizhi">
					<text>河南郑州</text>
					<text>发布时间:2023-03-27 10:30</text>
				</view>
				<view class="dianhua">
					<view class="dianhua-left">
						<u-image class="img" width="100rpx" height="100rpx" shape="circle"
							src="/static/dome/touxiang.jpg"></u-image>
						<view>
							<view class="xingming">先生</view>
							<text>1870361****</text>
						</view>
					</view>
					<view class="dianhua-right">
						<view class="bottm">
							<button class="btn1" size="mini">拨打电话</button>
							<button class="btn2" size="mini">投诉</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 机械类型 -->
			<view class="leixing">
				<view class="title">机械类型</view>
				<view class="tet">装载机/铲车/配件</view>
			</view>
			<!-- 详细信息 -->
			<view class="xiangxi">
				<view class="title">详细信息</view>
				<view class="tet">出租龙工 其他 装载机</view>
				<u-image width="200rpx" height="200rpx" src="/static/dome/wujueji.webp"></u-image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="footer-left">
				<u-icon class="icon" name="star" label="收藏" label-pos="bottom" size="50rpx" label-size="24rpx"></u-icon>
				<u-icon class="icon" name="share" label="分享" label-pos="bottom" size="50rpx" label-size="24rpx">
				</u-icon>
				<u-icon class="icon" name="file-text" label="投诉" label-pos="bottom" size="50rpx" label-size="24rpx">
				</u-icon>
			</view>
			<view class="footer-right">
				<u-button class="btn" type="error" shape="circle" size="medium">拔打电话</u-button>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.xiangqing {
		background-color: #f6f6f6;

		// 通告
		.tonggao {
			background-color: #ffffff;
			color: #fba81b;
			padding: 20rpx;
			margin: 20rpx 0;

			.fabu,
			.zhiding {
				color: #f6f6f6;
				border-radius: 10rpx;
				background-color: #fba81b;
				margin-left: 10rpx;
			}
		}

		// 出租信息
		.xinxi {
			background-color: #fff;
			padding: 20rpx;

			.chuzu {
				.title {
					font-size: 32rpx;
					font-weight: 700;
				}

				.dizhi {
					margin: 20rpx 0;
					display: flex;
					justify-content: space-between;

					text {
						color: #9f9e9e;
					}
				}

				.dianhua {
					height: 140rpx;
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					border-top: 1px solid #e7e6df;
					border-bottom: 1px solid #e7e6df;

					.dianhua-left {
						display: flex;

						.img {
							margin-right: 20rpx;
						}

						.xingming {
							margin-bottom: 20rpx;
						}
					}

					.dianhua-right {
						.bottm {
							margin-top: 30rpx;

							.btn1 {
								width: 130rpx;
								height: 50rpx;
								line-height: 50rpx;
								padding: 0;
								color: #fff;
								background-color: #ffa926;
								margin-right: 20rpx;
							}

							.btn2 {
								width: 70rpx;
								height: 50rpx;
								line-height: 50rpx;
								padding: 0;
								color: #fff;
								background-color: #ff7a3c;
							}
						}
					}
				}
			}

			// 机械类型
			.leixing {
				.title {
					font-size: 32rpx;
					font-weight: 700;
					margin: 20rpx 0;
				}

				.tet {
					width: 250rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					background-color: #f5f5f5;

				}
			}

			// 详细信息
			.xiangxi {
				.title {
					font-size: 32rpx;
					font-weight: 700;
					margin: 20rpx 0;
				}

				.tet {
					margin-bottom: 20rpx;
				}
			}

		}

		// 底部
		.footer {
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			padding: 0 20rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.footer-left {
				.icon {
					margin: 0 30rpx;
					color: #888888;
				}
			}

			.footer-right {
				.btn {
					// font-size: 32rpx;
					// height: 80rpx;
					// background: linear-gradient(to right, #e55427, #ff934b);
				}
			}
		}

	}
</style>
